<!--
  1.承载拖拽容器
  2.自身位置大小作为拖拽容器的参考位置
-->
<template>
  <div ref="DragBox" :style="box_style" class="mdragble-box">
    <slot name="default"></slot>
    <!-- 未实现 -->
    <slot name="background"></slot>
  </div>
</template>

<script>
  export default {
    name: "DragBox",
    props: {
      // 分组名称，用于跨组件寻找父级
      groupName: {
        type: String,
        default: 'DragBox'
      },
      // 样式
      option: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {}
    },

    mounted() {
    },
    methods: {
      getDomInfo() {
        const {top, left, width, height} = this.$refs.DragBox.getBoundingClientRect();
        return {top, left, width, height};
      }
    },

    computed: {
      box_style() {
        const option = Object.assign({}, this.option);
        let {
          width = '100%',
          height = '100%',
        } = this.option;
        option.width = width;
        option.height = height;
        return option;
      }
    },
    watch: {}
  }
</script>

<style scoped>
  .mdragble-box {
    position: relative;
  }
</style>
